<template>
    <div class="container">
      <div class="row">
        <div class="child">子元素 1</div>
        <div class="child">子元素 2</div>
        <div class="child">子元素 3</div>
      </div>
      <div class="content">其他内容</div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'FlexLayout',
  }
  </script>
  
  <style scoped>
  .container {
    display: flex;
    flex-direction: column; /* 设置主轴方向为列 */
    justify-content: center; /* 主轴对齐方式为 center */
    align-items: center; /* 交叉轴对齐方式为 center */
    height: 100vh; /* 满屏高度 */
  }
  
  .row {
    display: flex;
    justify-content: flex-start; /* 子元素对齐方式为 flex-start */
    width: 100%; /* 确保行宽度为100% */
  }
  
  .child {
    flex: 1; /* 子元素平分空间 */
    margin: 0 10px; /* 添加间隔 */
    display: flex;
    justify-content: center; /* 子元素内部内容居中 */
    align-items: center; /* 子元素内部内容居中 */
    height: 50px; /* 子元素高度 */
    background-color: #42b983; /* 背景颜色 */
    color: white; /* 字体颜色 */
    border-radius: 5px; /* 圆角 */
  }
  
  /* 可选的内容样式 */
  .content {
    margin-top: 20px; /* 与上方行之间的间隔 */
    padding: 20px;
    background-color: #f3f3f3; /* 背景颜色 */
    width: 80%; /* 宽度 */
    text-align: center; /* 文本居中 */
  }
  </style>
  